<template>
  <!-- inline:代表的是行内表单，代表一行可以放置多个表单元素 -->
  <el-form :inline="true" class="demo-form-inline">
    <el-form-item label="一级分类" :model="cForm">
      <el-select placeholder="请选择" v-model="cForm.c1Id" @change="handler1">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1) in c1List" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select placeholder="请选择" v-model="cForm.c2Id" :disabled="!cForm.c1Id" @change="handler2">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2) in c2List" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select placeholder="请选择" v-model="cForm.c3Id" :disabled="!cForm.c2Id" @change="handler3">
       <el-option :label="c3.name" :value="c3.id" v-for="(c3) in c3List" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "CategorySelect",
  data(){
      return {
        c1List:[],
        c2List:[],
        c3List:[],
        cForm:{
            c1Id:"",
            c2Id:"",
            c3Id:"",
        }
      }
  },
  mounted() {
    this.getCategory1List();
  },
  methods: {
    async getCategory1List() {
      let result = await this.$API.attr.reqCategory1List();
      if(result.code==200){
          this.c1List=result.data
      }
    },
    //@change是elUI的自定义事件，所绑定值改变时会触发，传递目前选中的值，也就是从c1Id了
    async handler1(c1Id){
      this.c2List=[],
      this.c3List=[],
      this.cForm.c2Id=""
      this.cForm.c3Id=""
      // console.log("handler1");
      let result =await this.$API.attr.reqCategory2List(c1Id)
      if(result.code==200){
        this.c2List=result.data
      }
    },
    async handler2(c2Id){
      this.c3List=[],
      this.cForm.c3Id=""
      // console.log("handler2");
      let result =await this.$API.attr.reqCategory3List(c2Id)
      if(result.code==200){
        this.c3List=result.data
      }
    },
    handler3(c3Id){
      this.$emit("getCategoryId",{c1Id:this.cForm.c1Id,c2Id:this.cForm.c2Id,c3Id:c3Id})
    }
  },
};
</script>

<style>
</style>